<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="layout w-full h-full box-border bg-white p-[20px]">
        <a-row :gutter="40">
          <a-col :span="8">
            <div class="calculate-common p-[25px]">
              <div class="calculate-title mb-[25px]">科目选择</div>
              <SubjectSelection />
            </div>
          </a-col>
          <a-col :span="12">
            <div class="calculate-common p-[25px]">
              <div class="calculate-title mb-[25px]">已选科目</div>
              <SelectedSubjects />
            </div>
          </a-col>
        </a-row>
        <!-- 底部 -->
        <div class="flex justify-end mt-[20px]">
          <template v-if="isEdit">
            <a-button @click="isEdit = false">取消</a-button>
            <a-button type="primary" class="ml-[20px]" @click="save">保存</a-button>
          </template>
          <a-button type="primary" class="ml-[20px]" @click="edit" v-else>编辑</a-button>
        </div>
      </div>
    </template>
  </PageMain>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue';
import SelectedSubjects from './selected_subjects.vue';
import SubjectSelection from './subject_selection.vue';
import { createListDate } from '@/api/costManagement/assignment_calculate/index';
import { deepClone } from '@/util/clonedeep';
import { Message } from '@arco-design/web-vue';
const isEdit = ref(false);
const defaultCheckedKeys = ref<any>([]);
provide('defaultCheckedKeys', defaultCheckedKeys);
provide('isEdit', isEdit);

const edit = () => {
  isEdit.value = !isEdit.value;
};
const save = async () => {
  console.log(defaultCheckedKeys.value, '111');
  const data: string[] = deepClone(defaultCheckedKeys.value);
  const res = await createListDate({ id_list: data });
  if (res.code === '00000') {
    Message.success(`${res.message}`);
  }
  isEdit.value = !isEdit.value;
};
</script>

<style lang="less" scope>
.calculate-common {
  border: 1px solid #ebf0fa;
  border-radius: 8px;
  height: calc(100vh - 200px);

  .calculate-title {
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    color: #394d73;
  }
}
</style>
